@vcmap/ui 5.0.0-rc.9 → 5.0.1

package/src/components/notification/VcsTooltip.vue

@@ -6,119 +6,120 @@
     :top="tooltipPosition === 'top'"
     :left="tooltipPosition === 'left'"
     :right="tooltipPosition === 'right'"
-    :open-delay="$attrs.openDelay || 200"
-    v-bind="{...$props, ...$attrs}"
+    transition="expand-x-transition"
+    v-bind="{ ...$props, ...$attrs }"
   >
     <template #activator="{ on, attrs }">
       <slot name="activator" :on="on" :attrs="attrs" />
     </template>
-    <span>{{ tooltip }}</span>
+    <span>{{ $t(tooltip) }}</span>
   </v-tooltip>
 </template>
 <style lang="scss" scoped>
-//.v-tooltip__content.tooltip {
-//  border: 1px solid black;
-//  border-radius: 0;
-//  background-color: #222222;
-//
-//&.arrow-top {
-//   transform: translateY(-6px);
-//
-//&::after, &::before {
-//             bottom: 100%;
-//             left: 50%;
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(194, 225, 245, 0);
-//   border-bottom-color: black;
-//   border-width: 5px;
-//   margin-left: -5px;
-// }
-//}
-//
-//&.arrow-bottom {
-//   transform: translateY(6px);
-//
-//&::after, &::before {
-//             top: 100%;
-//             left: 50%;
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(194, 225, 245, 0);
-//   border-top-color: black;
-//   border-width: 5px;
-//   margin-left: -5px;
-// }
-//}
-//
-//&.arrow-right {
-//&::after, &::before {
-//             top: 50%;
-//             right: -11px;
-//             transform: translateY(-50%);
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(255, 0, 0, 0);
-//   border-left-color: black;
-//   border-width: 5px;
-//   margin-left: -5px;
-// }
-//}
-//
-//&.arrow-left {
-//
-//&::after, &::before {
-//             top: 50%;
-//             left: -11px;
-//             transform: translateY(-50%);
-//             border: solid transparent;
-//             content: "";
-//             height: 0;
-//             width: 0;
-//             position: absolute;
-//             pointer-events: none;
-//           }
-//
-//&::before {
-//   border-color: rgba(194, 225, 245, 0);
-//   border-right-color: black;
-//   border-width: 5px;
-// }
-//}
-//}
+  //.v-tooltip__content.tooltip {
+  //  border: 1px solid black;
+  //  border-radius: 0;
+  //  background-color: #222222;
+  //
+  //&.arrow-top {
+  //   transform: translateY(-6px);
+  //
+  //&::after, &::before {
+  //             bottom: 100%;
+  //             left: 50%;
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(194, 225, 245, 0);
+  //   border-bottom-color: black;
+  //   border-width: 5px;
+  //   margin-left: -5px;
+  // }
+  //}
+  //
+  //&.arrow-bottom {
+  //   transform: translateY(6px);
+  //
+  //&::after, &::before {
+  //             top: 100%;
+  //             left: 50%;
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(194, 225, 245, 0);
+  //   border-top-color: black;
+  //   border-width: 5px;
+  //   margin-left: -5px;
+  // }
+  //}
+  //
+  //&.arrow-right {
+  //&::after, &::before {
+  //             top: 50%;
+  //             right: -11px;
+  //             transform: translateY(-50%);
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(255, 0, 0, 0);
+  //   border-left-color: black;
+  //   border-width: 5px;
+  //   margin-left: -5px;
+  // }
+  //}
+  //
+  //&.arrow-left {
+  //
+  //&::after, &::before {
+  //             top: 50%;
+  //             left: -11px;
+  //             transform: translateY(-50%);
+  //             border: solid transparent;
+  //             content: "";
+  //             height: 0;
+  //             width: 0;
+  //             position: absolute;
+  //             pointer-events: none;
+  //           }
+  //
+  //&::before {
+  //   border-color: rgba(194, 225, 245, 0);
+  //   border-right-color: black;
+  //   border-width: 5px;
+  // }
+  //}
+  //}
 </style>
 <script>
+  import { VTooltip } from 'vuetify/lib';
 
-/**
- * @enum {string} TooltipPositions
- * @property {string} bottom
- * @property {string} left
- * @property {string} top
- * @property {string} right
- * @readonly
- * @module VcsTooltip
- */
+  /**
+   * @enum {string} TooltipPositions
+   * @property {string} bottom
+   * @property {string} left
+   * @property {string} top
+   * @property {string} right
+   * @readonly
+   * @module VcsTooltip
+   */
   const TooltipPositions = {
     bottom: 'arrow-top',
     top: 'arrow-bottom',
@@ -128,12 +129,15 @@
 
   /**
    * @description tooltip extending {@link https://vuetifyjs.com/en/api/v-tooltip/|vuetify v-tooltip}.
-   * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay.
+   * @vue-prop {string}                                 tooltip - Text content of a tooltip which appears on hover with default delay. This should be an i18n key.
    * @vue-prop {string}                                 [tooltipPosition='bottom'] - Position of the tooltip (allowed values: 'bottom'|'left'|'top'|'right').
    * @vue-computed {string}                             arrowClass - direction of tooltip arrow
    */
   export default {
     name: 'VcsTooltip',
+    components: {
+      VTooltip,
+    },
     props: {
       tooltip: {
         type: String,
@@ -142,7 +146,9 @@
       tooltipPosition: {
         type: String,
         default: 'bottom',
-        validator(value) { return Object.keys(TooltipPositions).includes(value); },
+        validator(value) {
+          return Object.keys(TooltipPositions).includes(value);
+        },
       },
     },
     computed: {

package/src/components/notification/validation.js

@@ -13,7 +13,7 @@ export default function validate(rules, value) {
         }
         return rule;
       })
-      .filter(val => val !== true);
+      .filter((val) => val !== true);
   }
   return [];
 }

package/src/components/plugins/AbstractConfigEditor.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-container class="pa-0">
+    <v-form v-model="isValid" @submit.prevent="submit">
+      <slot />
+      <div class="d-flex gap-2 px-2 pt-2 pb-1">
+        <div class="d-flex gap-2 w-full justify-start">
+          <VcsFormButton v-if="showReset" icon="$vcsReturn" @click="reset" />
+        </div>
+        <div class="d-flex gap-2 w-full justify-end">
+          <VcsFormButton type="submit" variant="filled" :disabled="!isValid">
+            {{ $t('components.apply') }}
+          </VcsFormButton>
+          <VcsFormButton @click.stop="cancel">
+            {{ $t('components.cancel') }}
+          </VcsFormButton>
+          <VcsActionButtonList :actions="actions" button="VcsFormButton" />
+        </div>
+      </div>
+    </v-form>
+  </v-container>
+</template>
+
+<script>
+  import { VContainer, VForm } from 'vuetify/lib';
+  import { ref, inject } from 'vue';
+  import VcsFormButton from '../buttons/VcsFormButton.vue';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+
+  /**
+   * @description Basic wrapper for all config editor components using {@link https://vuetifyjs.com/en/api/v-form/ |vuetify form}.
+   * Providing a footer with submit, cancel and optionally reset button.
+   * @vue-prop {boolean} [showReset=false] - Flag to show a reset button in the footer. You need to handle @reset in a child component.
+   * @vue-prop {Array<VcsAction>} [actions] - Optional actions rendered as ActionButtonList in the footer.
+   * @vue-event {Event} submit - Event fired on clicking the submit button.
+   * @vue-event {Event} cancel - Event fired on clicking the cancel button.
+   * @vue-event {Event} reset - Event fired on clicking the reset button.
+   */
+  export default {
+    name: 'AbstractConfigEditor',
+    components: {
+      VContainer,
+      VForm,
+      VcsFormButton,
+      VcsActionButtonList,
+    },
+    props: {
+      showReset: {
+        type: Boolean,
+        default: false,
+      },
+      actions: {
+        type: Array,
+        default: () => [],
+      },
+    },
+    setup(props, { attrs, emit }) {
+      const app = inject('vcsApp');
+
+      const close = () => {
+        if (app.windowManager.has(attrs['window-state'].id)) {
+          app.windowManager.remove(attrs['window-state'].id);
+        }
+      };
+
+      return {
+        isValid: ref(true),
+        submit(e) {
+          close();
+          emit('submit', e);
+        },
+        cancel(e) {
+          close();
+          attrs.setConfig();
+          emit('cancel', e);
+        },
+        reset(e) {
+          emit('reset', e);
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/style/MenuWrapper.vue

@@ -0,0 +1,140 @@
+<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 from '../form-inputs-controls/VcsFormSection.vue';
+  import VcsCheckbox from '../form-inputs-controls/VcsCheckbox.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+
+  /**
+   * @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>

package/src/components/style/VcsFillMenu.vue

@@ -0,0 +1,61 @@
+<template>
+  <MenuWrapper
+    v-bind="{ value, valueDefault, disabled }"
+    :value-fallback="{ color: [255, 255, 255, 1] }"
+    v-on="$listeners"
+    name="components.style.fill"
+  >
+    <template #preview>
+      <v-sheet :color="rgbaString" width="100%" height="100%" />
+    </template>
+    <template #content>
+      <VcsFillSelector :value="value" v-on="$listeners" />
+    </template>
+  </MenuWrapper>
+</template>
+
+<script>
+  import { computed } from 'vue';
+  import { VSheet } from 'vuetify/lib';
+  import VcsFillSelector from './VcsFillSelector.vue';
+  import MenuWrapper from './MenuWrapper.vue';
+  import { useColorObject, rgbaObjectToString } from './composables.js';
+
+  /**
+   * @description A wrapper for the VcsFillSelector, that has a small color preview and a menu that pops up when clicking the preview, containing the fill selector.
+   * When clicking the reset button, the valueDefault is emitted, when unchecking the checkbox in front of the preview, null is emitted. If it is checked again, valueDefault is emitted. If the valueDefault is undefined or null, { color: [255, 255, 255, 1] } is emitted.
+   * @vue-prop {import("ol/style/Fill").Options} [value] - The Fill Options
+   * @vue-prop {import("ol/style/Fill").Options} [valueDefault] - The default Fill Options
+   * @vue-prop {boolean} [disabled=false] - Disable the input
+   */
+  export default {
+    name: 'VcsFillMenu',
+    components: {
+      VSheet,
+      VcsFillSelector,
+      MenuWrapper,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+      valueDefault: {
+        type: Object,
+        default: undefined,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const rgbaObject = useColorObject(() => props.value?.color);
+      return {
+        rgbaString: computed(() => rgbaObjectToString(rgbaObject.value)),
+      };
+    },
+  };
+</script>
+
+<style scoped></style>

package/src/components/style/VcsFillSelector.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-sheet>
+    <v-color-picker
+      :value="rgbaObject"
+      @input="updateColor"
+      mode="rgba"
+      :hide-mode-switch="true"
+      :disabled="!value"
+    />
+  </v-sheet>
+</template>
+
+<script>
+  import { VSheet, VColorPicker } from 'vuetify/lib';
+  import { useColorObject } from './composables.js';
+
+  /**
+   * @description Allows to model a JSON representation of ol/Fill vector style with a vuetify VColorPicker.
+   * @vue-prop {import("ol/style/Fill").Options} value - The Fill Options
+   */
+  export default {
+    name: 'VcsFillSelector',
+    components: {
+      VSheet,
+      VColorPicker,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+    },
+    setup(props, { emit }) {
+      return {
+        rgbaObject: useColorObject(() => props.value?.color),
+        updateColor(rgba) {
+          const fill = {
+            color: [rgba.r, rgba.g, rgba.b, rgba.a],
+          };
+          emit('input', fill);
+        },
+      };
+    },
+  };
+</script>

package/src/components/style/VcsImageMenu.vue

@@ -0,0 +1,83 @@
+<template>
+  <MenuWrapper
+    v-bind="{ value, valueDefault }"
+    :value-fallback="{
+      radius: 10,
+      fill: { color: [255, 255, 255, 1] },
+      stroke: { color: [0, 0, 0, 1], width: 2 },
+    }"
+    v-on="$listeners"
+    name="components.style.image"
+  >
+    <template #preview>
+      <canvas ref="canvas" width="32" height="24" />
+    </template>
+    <template #content>
+      <VcsImageSelector
+        v-bind="{ value, valueDefault, iconOptions, extendedShapeSettings }"
+        v-on="$listeners"
+        class="pb-2"
+      />
+    </template>
+  </MenuWrapper>
+</template>
+
+<script>
+  import { onMounted, ref, watch } from 'vue';
+  import MenuWrapper from './MenuWrapper.vue';
+  import VcsImageSelector, { drawImageStyle } from './VcsImageSelector.vue';
+
+  /**
+   * @description A wrapper for the VcsImageSelector, that has a small shape/icon preview and a menu that pops up when clicking the preview, containing the image selector.
+   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} value - The Image options
+   * @vue-prop {import("ol/style/RegularShape").Options | import("ol/style/Circle").Options | import("ol/style/Icon").Options} valueDefault - The default image options
+   * @vue-prop {import("ol/style/Icon").Options} iconOptions - The icon options too choose from. Scale and opacity are ignored.
+   * @vue-prop {boolean} [extendedShapeSettings=false] - If true, there are all the input fields needed to create arbitrary ol RegularShapes.
+   */
+  export default {
+    name: 'VcsImageMenu',
+    components: {
+      MenuWrapper,
+      VcsImageSelector,
+    },
+    props: {
+      value: {
+        type: Object,
+        default: undefined,
+      },
+      valueDefault: {
+        type: Object,
+        default: undefined,
+      },
+      iconOptions: {
+        type: Array,
+        default: undefined,
+      },
+      extendedShapeSettings: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const canvas = ref(null);
+
+      onMounted(() => {
+        drawImageStyle(canvas.value, props.value, true);
+        watch(
+          () => props.value,
+          () => {
+            // XXX Maybe add some sort of timeout funciton, so it draws only once when user stops using the slider
+            drawImageStyle(canvas.value, props.value, true);
+          },
+          { deep: true },
+        );
+      });
+
+      return {
+        canvas,
+      };
+    },
+  };
+</script>
+
+<style scoped></style>