@vcmap/ui 5.0.0-rc.26 → 5.0.0-rc.27

package/src/actions/actionHelper.js

@@ -69,6 +69,7 @@ export function createToggleAction(
     name: String,
     icon: [undefined, String],
     title: [undefined, String],
+    hasUpdate: [undefined, Boolean],
   });
   check(windowComponent, { id: String });
   check(owner, [String, vcsAppSymbol]);

package/src/application/VcsApp.vue

@@ -154,6 +154,11 @@
       CesiumMap: '$vcs3d',
       ObliqueMap: '$vcsObliqueView',
     };
+    const mapBtnWeight = {
+      OpenlayersMap: 3,
+      CesiumMap: 2,
+      ObliqueMap: 1,
+    };
 
     const mapButtonActionDestroy = {};
     const setupMap = ({ className, name }) => {
@@ -173,6 +178,7 @@
         {
           id: `mapButton-${name}`,
           action,
+          weight: mapBtnWeight[className],
         },
         vcsAppSymbol,
         ButtonLocation.MAP,
@@ -342,7 +348,7 @@
         provides: {
           collectionManager: app.categoryManager,
         },
-        slot: WindowSlot.STATIC,
+        slot: WindowSlot.DYNAMIC_LEFT,
       },
       app.windowManager,
       vcsAppSymbol,

package/src/components/buttons/VcsActionButtonList.vue

@@ -9,6 +9,7 @@
       :icon="btn.icon"
       :active="btn.active"
       :disabled="btn.disabled"
+      :has-update="btn.hasUpdate"
       :background="btn.background"
       @click.stop="btn.callback($event)"
       v-bind="{ ...$attrs }"

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

@@ -43,8 +43,9 @@
       label.v-label.error--text {
         animation: none;
       }
-      .v-icon,
-      .v-label {
+
+      .primary--text,
+      .v-label:not(.v-label--is-disabled) {
         &.theme--light {
           color: map-get($shades, 'black') !important;
           &.error--text {

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

@@ -1,29 +1,49 @@
 <template>
   <section class="vcs-form-section">
     <slot name="header" :heading="heading" :actions="actions">
-      <article class="pa-2 base lighten-3">
-        <div
-          class="form-section-header d-flex justify-space-between align-center"
-        >
-          <strong>{{ $t(heading) }}</strong>
+      <div class="vcs-form-section-header d-flex base lighten-3">
+        <div class="d-flex justify-space-between w-full">
+          <div class="d-flex align-center" :class="{ 'px-2': !expandable }">
+            <v-btn
+              :ripple="false"
+              dense
+              plain
+              icon
+              small
+              text
+              :disabled="disabled"
+              elevation="0"
+              @click="open = !open"
+              v-if="expandable"
+            >
+              <v-icon>{{
+                open ? 'mdi-chevron-down' : 'mdi-chevron-right'
+              }}</v-icon>
+            </v-btn>
+            <strong :class="{ 'text--disabled': disabled }">{{
+              $t(heading)
+            }}</strong>
+          </div>
           <VcsActionButtonList
             :actions="actions"
             :overflow-count="actionButtonListOverflowCount"
+            class="pa-2"
           />
         </div>
-      </article>
+      </div>
     </slot>
     <VcsHelp :text="helpText" :show="showHelp" class="base lighten-4">
       <slot name="help" />
     </VcsHelp>
-    <article class="section-content">
+    <article class="section-content" v-if="showContent">
       <slot />
     </article>
   </section>
 </template>
 
 <script>
-  import { computed, reactive } from 'vue';
+  import { computed, reactive, ref } from 'vue';
+  import { VBtn, VIcon } from 'vuetify/lib';
   import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
   import VcsHelp from '../notification/VcsHelp.vue';
 
@@ -34,6 +54,9 @@
    * @vue-data {slot} [#default] - slot with the section content
    * @vue-data {slot} [#help] - Slot to specify html based help. Gets precedence over helpText prop.
    * @vue-prop {string} heading - Title of the section to be displayed, will be translated.
+   * @vue-prop {boolean} [expandable=false] - If true, section can be toggled.
+   * @vue-prop {boolean} [startOpen=false] - If section starts open.
+   * @vue-prop {boolean} [disabled=false] - If expansion is disabled. Title is rendered in disabled style.
    * @vue-prop {Array<VcsAction>}    headerActions - Icons to be displayed on the right side
    * @vue-prop {number} [actionButtonListOverflowCount] - overflow count to use for action lists in the title and items
    * @vue-prop {string} [helpText] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over helpText prop.
@@ -42,6 +65,8 @@
   export default {
     name: 'VcsFormSection',
     components: {
+      VBtn,
+      VIcon,
       VcsActionButtonList,
       VcsHelp,
     },
@@ -50,6 +75,18 @@
         type: String,
         default: undefined,
       },
+      expandable: {
+        type: Boolean,
+        default: false,
+      },
+      startOpen: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
       headerActions: {
         type: Array,
         default: () => [],
@@ -65,6 +102,13 @@
       },
     },
     setup(props, { slots }) {
+      const open = ref(props.startOpen);
+      const showContent = computed(() => {
+        if (props.expandable) {
+          return open.value;
+        }
+        return true;
+      });
       const helpAction = reactive({
         name: 'help',
         title: 'components.vcsFormSection.help',
@@ -86,6 +130,8 @@
       });
 
       return {
+        open,
+        showContent,
         showHelp,
         actions,
       };
@@ -93,7 +139,11 @@
   };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  @import '../../styles/shades.scss';
+  .vcs-form-section-header {
+    height: 40px;
+  }
   .v-alert--text:before {
     background-color: transparent;
   }

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

@@ -4,6 +4,7 @@
     class="vcs-label"
     :class="{
       'vcs-label-dense': dense,
+      'vcs-label-required': required,
       'px-1': dense,
       'px-2': !dense,
     }"
@@ -22,6 +23,10 @@
   .vcs-label-dense {
     line-height: $line-height-dense;
   }
+  .vcs-label-required:after {
+    content: ' *';
+    color: var(--v-error-base);
+  }
 </style>
 <script>
   /**
@@ -29,6 +34,7 @@
    * pass the label text as innerHtml
    * @vue-prop {string} htmlFor - an id reference the label is meant for
    * @vue-prop {boolean} [dense=true] - default line height is 32px (dense). If set false, height is 40px.
+   * @vue-prop {boolean} [required=false] - Marks an input field as required by adding an asterisk after the label.
    */
   export default {
     name: 'VcsLabel',
@@ -41,6 +47,10 @@
         type: Boolean,
         default: true,
       },
+      required: {
+        type: Boolean,
+        default: false,
+      },
     },
   };
 </script>

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

@@ -0,0 +1,175 @@
+<template>
+  <VcsTooltip
+    :tooltip-position="tooltipPosition"
+    :tooltip="errorMessage"
+    color="error"
+    :max-width="200"
+  >
+    <template #activator="{ on, attrs }">
+      <v-container v-on="on" class="py-0" :class="isDense ? 'px-1' : 'px-2'">
+        <v-radio-group
+          ref="radioGroup"
+          hide-details
+          class="vcs-radio-group"
+          :ripple="false"
+          :dense="isDense"
+          v-bind="{ ...$attrs, ...attrs }"
+          v-on="{ ...$listeners, ...on }"
+        >
+          <v-row no-gutters class="justify-center">
+            <v-col
+              v-for="(item, idx) in items"
+              :key="idx"
+              cols="1"
+              class="mx-2"
+            >
+              <v-row no-gutters>
+                <v-col>
+                  <div
+                    class="d-flex justify-center label-wrapper pt-1"
+                    :class="$attrs.disabled ? 'disabled' : ''"
+                  >
+                    <slot name="label" :value="item[itemValue]" :src="item.src">
+                      <img
+                        :src="item.src"
+                        :alt="item[itemValue]"
+                        class="image"
+                      />
+                    </slot>
+                  </div>
+                </v-col>
+              </v-row>
+              <v-row no-gutters>
+                <v-col>
+                  <v-radio
+                    :value="item[itemValue]"
+                    :ripple="false"
+                    class="ma-0"
+                    :class="isDense ? 'vcs-radio-dense' : 'vcs-radio'"
+                    :dense="isDense"
+                  />
+                </v-col>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-radio-group>
+      </v-container>
+    </template>
+  </VcsTooltip>
+</template>
+
+<script>
+  import { computed, ref } from 'vue';
+  import { VContainer, VRow, VCol, VRadioGroup, VRadio } from 'vuetify/lib';
+  import { VcsTooltip } from '@vcmap/ui';
+  import { useErrorSync } from './composables.js';
+
+  /**
+   * @description Stylized wrapper around {@link https://vuetifyjs.com/en/api/v-radio-group/ |vuetify radio group} which places icons or raster src files above the radio buttons as labels and arranges them in a grid.
+   * @vue-prop {{value: string, src: string}[]} items - The items to be displayed in the grid. The src is the path to the raster image.
+   * @vue-prop {('bottom' | 'left' | 'top' | 'right')}  [tooltipPosition='right'] - Position of the error tooltip.
+   * @vue-prop {string} itemValue - The key of the provided item objects that contains the value.
+   * @vue-data {slot} [#label] - slot to display labels where the src does not contain a path to an img but e.g. the name of an icon. Then an v-icon can be used in the slot.
+   */
+  export default {
+    name: 'VcsRadioGrid',
+    components: {
+      VContainer,
+      VRow,
+      VCol,
+      VRadioGroup,
+      VRadio,
+      VcsTooltip,
+    },
+    props: {
+      items: {
+        type: Array,
+        required: true,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'right',
+      },
+      itemValue: {
+        type: String,
+        default: 'value',
+      },
+    },
+    setup(props, { attrs }) {
+      const radioGroup = ref();
+
+      const errorMessage = useErrorSync(radioGroup);
+      return {
+        isDense: computed(() => attrs.dense !== false),
+        radioGroup,
+        errorMessage,
+      };
+    },
+    model: {
+      event: 'change',
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  // TODO: scss for radio buttons should be moved to own file.
+  @import '../../styles/vcsFont.scss';
+  @import '../../styles/shades.scss';
+  .v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {
+    margin-bottom: 0;
+  }
+  .v-input {
+    &.vcs-radio-group {
+      ::v-deep {
+        margin-top: 0;
+        padding-top: 0;
+        label.v-label,
+        .v-icon.v-icon {
+          font-size: $vcs-font-size;
+          color: inherit;
+          &.theme--light {
+            color: map-get($shades, 'black') !important;
+            &.error--text {
+              color: var(--v-error-base) !important;
+            }
+          }
+          &.theme--dark {
+            color: map-get($shades, 'white') !important;
+            &.error--text {
+              color: var(--v-error-base) !important;
+            }
+          }
+        }
+        .v-radio:not(:last-child):not(:only-child) {
+          margin-bottom: 0;
+        }
+        .v-input--selection-controls__input {
+          margin: 0;
+        }
+        label.v-label.error--text {
+          animation: none;
+        }
+      }
+    }
+  }
+  .vcs-radio {
+    height: 40px;
+    align-items: center;
+  }
+  .vcs-radio-dense {
+    height: 32px;
+    align-items: center;
+  }
+  .image {
+    max-height: 24px;
+    max-width: 24px;
+    height: auto;
+    width: auto;
+  }
+  .label-wrapper {
+    width: 24px;
+  }
+  .disabled {
+    opacity: 0.3;
+  }
+</style>

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

@@ -40,6 +40,9 @@
                 (+{{ $attrs.value.length - 1 }})
               </span>
             </template>
+            <template v-for="(_, slot) of $scopedSlots" #[slot]="scope">
+              <slot :name="slot" v-bind="scope" />
+            </template>
           </v-select>
         </span>
       </template>

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

@@ -24,6 +24,7 @@
           v-bind="{ ...$attrs, ...attrs }"
           v-on="{ ...$listeners, ...on }"
           :height="isDense ? 24 : 32"
+          :rules="rules"
           class="py-1 primary--placeholder align-center"
           :class="{
             'remove-outline': !isOutlined,
@@ -244,6 +245,16 @@
         }
       });
 
+      const rules = computed(() => {
+        if (attrs.type === 'number' && Array.isArray(attrs.rules)) {
+          return attrs.rules.map((rule) => {
+            return (value) => rule(parseFloat(value));
+          });
+        } else {
+          return attrs.rules;
+        }
+      });
+
       function onEscape(event) {
         textFieldRef.value.blur();
         emit('input', textFieldRef.value.initialValue);
@@ -268,6 +279,7 @@
         isOutlined,
         visibleValue,
         type,
+        rules,
         onEscape,
         textFieldRef,
         errorMessage,

package/src/components/icons/+all.js

@@ -22,6 +22,7 @@ import ComponentsIcon from './ComponentsIcon.vue';
 import ConeIcon from './ConeIcon.vue';
 import DimensionsHouseIcon from './DimensionsHouseIcon.vue';
 import EditIcon from './EditIcon.vue';
+import EditVerticesIcon from './EditVerticesIcon.vue';
 import ElevationProfileIcon from './ElevationProfileIcon.vue';
 import ExportAreaIcon from './ExportAreaIcon.vue';
 import ExportFlightIcon from './ExportFlightIcon.vue';
@@ -204,6 +205,9 @@ const IconMap = {
   edit: {
     component: EditIcon,
   },
+  editVertices: {
+    component: EditVerticesIcon,
+  },
   elevationProfile: {
     component: ElevationProfileIcon,
   },

package/src/components/icons/EditVerticesIcon.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="23.907"
+    height="24"
+    viewBox="0 0 23.907 24"
+  >
+    <g id="icon-16-edit_vertex" transform="translate(0 0)">
+      <path
+        id="Path_840"
+        data-name="Path 840"
+        d="M-5.217-90.456l1.376,1.3,6.355-6.38L1.138-96.81Z"
+        transform="translate(5.217 109.281)"
+        fill="currentColor"
+      />
+      <path
+        id="Path_841"
+        data-name="Path 841"
+        d="M2.9-100.708A2.818,2.818,0,0,0-.074-97.655,2.827,2.827,0,0,0,2.9-94.778,2.8,2.8,0,0,0,5.88-97.655,2.853,2.853,0,0,0,2.9-100.708Z"
+        transform="translate(7.204 107.775)"
+        fill="currentColor"
+      />
+      <path
+        id="Path_842"
+        data-name="Path 842"
+        d="M3.806-99.513l1.5,1.426,6.3-6.355-1.363-1.363Z"
+        transform="translate(8.703 105.805)"
+        fill="currentColor"
+      />
+      <path
+        id="Path_843"
+        data-name="Path 843"
+        d="M4.221-96.244,8.771-85.5l1.871-4.384,4.4-1.958Z"
+        transform="translate(8.863 109.5)"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+</template>

package/src/components/lists/VcsActionList.vue

@@ -53,6 +53,7 @@
    * @property {string} [icon] - icon rendered on the button. If no icon provided, item is rendered in overflow
    * @property {Function} callback - callback function is triggered when the button is clicked
    * @property {boolean} [active=false] - optional state of button. If active, button is rendered in primary color
+   * @property {boolean} [hasUpdate=false] - optional hasUpdate of button. If true, a yellow notification is rendered next to the button
    * @property {boolean} [background=false] - optional background state. If active and background, button is rendered in primary color outlined
    * @property {boolean} [disabled=false] - optional flag to indicate that the action is disabled
    */
@@ -68,6 +69,7 @@
     callback: Function,
     active: [undefined, Boolean],
     background: [undefined, Boolean],
+    hasUpdate: [undefined, Boolean],
     disabled: [undefined, Boolean],
   };
 

package/src/components/style/MenuWrapper.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-sheet>
+    <div class="d-flex align-center py-1">
+      <VcsCheckbox
+        :value="!!value"
+        @change="handleCheckbox"
+        :disabled="disabled"
+      />
+      <v-menu
+        :close-on-content-click="false"
+        :close-on-click="false"
+        v-model="isMenuOpen"
+        :absolute="true"
+        :disabled="!value || disabled"
+        min-width="300"
+        max-width="300"
+      >
+        <template #activator="{ on, attrs }">
+          <VcsTooltip :tooltip="name">
+            <template #activator="{ on: tooltipOn, attrs: tooltipAttrs }">
+              <v-card
+                rounded
+                height="24px"
+                width="32px"
+                v-bind="{ ...attrs, ...tooltipAttrs }"
+                v-on="{ ...on, ...tooltipOn }"
+                class="tiled-background"
+              >
+                <slot name="preview" />
+              </v-card>
+            </template>
+          </VcsTooltip>
+        </template>
+        <VcsFormSection
+          :heading="name"
+          :header-actions="[
+            {
+              name: 'reset',
+              title: 'components.style.reset',
+              icon: '$vcsReturn',
+              callback: () => {
+                reset();
+              },
+            },
+            {
+              name: 'close',
+              title: 'components.close',
+              icon: 'mdi-close-thick',
+              callback: () => {
+                close();
+              },
+            },
+          ]"
+        >
+          <slot name="content" />
+        </VcsFormSection>
+      </v-menu>
+      <span class="ml-2">{{ $t(name) }}</span>
+    </div>
+  </v-sheet>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  import { VSheet, VMenu, VCard } from 'vuetify/lib';
+  import { VcsFormSection, VcsTooltip, VcsCheckbox } from '@vcmap/ui';
+
+  /**
+   * @description A wrapper for style components, that provides:
+   * - a 32 x 24 px preview
+   * - a checkbox that emits null when unchecked and the value of the valueDefault prop when checked again. If the vauleDefault is undefined or null, the valueFallback will be emitted.
+   * - a menu that pops up when clicking the preview. It has also a reset button that emits the value of the valueDefault prop when clicked
+   * @vue-prop {Object} [value] - Style options that are modelled by the checkbox.
+   * @vue-prop {string} name - The name that is displayed in the header of the menu and in the tooltip of the preview.
+   * @vue-prop {Object} [valueDefault] - The default Options, that are applied when clicking reset or setting the checkbox from null to true.
+   * @vue-prop {Object} valueFallback - The fallback Options, in case the valueDefault is null or undefined. These are applied when the checkbox is checked again and the default value is null. The fallback value must not be null or undefined.
+   */
+  export default {
+    name: 'MenuWrapper',
+    components: {
+      VSheet,
+      VMenu,
+      VCard,
+      VcsFormSection,
+      VcsTooltip,
+      VcsCheckbox,
+    },
+    props: {
+      value: {
+        default: undefined,
+        required: false,
+        type: Object,
+      },
+      valueDefault: {
+        default: undefined,
+        type: Object,
+      },
+      valueFallback: {
+        required: true,
+        type: Object,
+      },
+      name: {
+        required: true,
+        type: String,
+      },
+      disabled: {
+        default: false,
+        type: Boolean,
+      },
+    },
+    setup(props, { emit }) {
+      const isMenuOpen = ref(false);
+
+      return {
+        isMenuOpen,
+        reset() {
+          emit('input', props.valueDefault);
+        },
+        close() {
+          isMenuOpen.value = false;
+        },
+        handleCheckbox(value) {
+          emit(
+            'input',
+            value ? props.valueDefault || props.valueFallback : null,
+          );
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped>
+  .tiled-background {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYlWNgYGCQwoKxgqGgcJA5h3yFAAs8BRWVSwooAAAAAElFTkSuQmCC)
+      repeat;
+  }
+</style>