@vcmap/ui 5.0.0-rc.8 → 5.0.0

package/src/components/lists/VcsTreeviewLeaf.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="d-flex flex-row align-center" v-if="item">
+    <div class="position-relative col-8 pa-0 d-flex align-center">
+      <span v-if="item.icon" class="d-inline-flex">
+        <v-icon v-if="isStringIcon" :size="16" class="mr-1">
+          {{ item.icon }}
+        </v-icon>
+        <ImageElementInjector :element="item.icon" v-else />
+      </span>
+      <VcsTooltip :tooltip="tooltip">
+        <template #activator="{ on, attrs }">
+          <span
+            v-bind="attrs"
+            v-on="on"
+            class="d-inline-block text-truncate"
+            ref="titleElem"
+            >{{ $t(item.title || item.name) }}</span
+          >
+        </template>
+      </VcsTooltip>
+    </div>
+
+    <VcsActionButtonList
+      v-if="item.actions.length > 0"
+      :actions="item.actions"
+      :block-overflow="true"
+      :overflow-count="3"
+      right
+      class="col-4 pa-0 d-flex align-center"
+    />
+  </div>
+</template>
+
+<script>
+  import { computed, ref } from 'vue';
+  import { VIcon } from 'vuetify/lib';
+  import VcsActionButtonList from '../buttons/VcsActionButtonList.vue';
+  import ImageElementInjector from '../ImageElementInjector.vue';
+  import VcsTooltip from '../notification/VcsTooltip.vue';
+
+  /**
+   * @description
+   * Template for a treeview leaf, see: https://vuetifyjs.com/en/api/v-treeview/
+   * @vue-prop {TreeViewItem} item - A ContentTreeItem
+   * @vue-computed {boolean} leaf - Whether the item is a leaf item or not
+   */
+  export default {
+    components: {
+      VcsTooltip,
+      VcsActionButtonList,
+      VIcon,
+      ImageElementInjector,
+    },
+    props: {
+      item: {
+        type: Object,
+        default: undefined,
+      },
+    },
+    setup(props) {
+      const leaf = computed(() => props.item?.children?.length === 0);
+      const titleElem = ref(null);
+
+      return {
+        isStringIcon: computed(() => typeof props.item.icon === 'string'),
+        leaf,
+        titleElem,
+        tooltip: computed(() => {
+          if (props.item.tooltip) {
+            return props.item.tooltip;
+          }
+          const elem = titleElem.value;
+          if (elem && elem.offsetWidth < elem.scrollWidth) {
+            return props.item.title;
+          }
+          return '';
+        }),
+      };
+    },
+  };
+</script>

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -0,0 +1,148 @@
+<template>
+  <div
+    class="pa-2 base lighten-3 position-relative d-flex flex-row justify-space-between align-center rounded-0"
+  >
+    <slot name="prepend">
+      <v-icon class="search-icon my-0 ml-1" size="12"> $vcsSearch </v-icon>
+    </slot>
+
+    <slot v-bind="{ ...$props, on: $listeners }">
+      <v-text-field
+        solo
+        dense
+        hide-details
+        class="searchbar outlined rounded-xl align-center d-flex justify-center base lighten-4 pa-1 pl-6"
+        :placeholder="$t(placeholder)"
+        :value="value"
+        v-on="$listeners"
+        clearable
+      />
+    </slot>
+
+    <slot name="append" :has-filter="hasFilter">
+      <v-icon v-if="hasFilter" class="ml-2" size="16">$vcsFilter</v-icon>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .input-container {
+    position: relative;
+  }
+
+  .search-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 12px;
+  }
+
+  input {
+    border-radius: 9999rem;
+    outline-style: none;
+    font-size: 12px;
+    box-shadow: 0 0 0 1px var(--v-base-lighten2);
+
+    &:focus {
+      box-shadow: 0 0 0 1px var(--v-primary-base);
+    }
+  }
+
+  ::v-deep {
+    .v-input__slot {
+      background-color: transparent !important;
+    }
+
+    .v-input__append-inner {
+      height: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .v-icon {
+        width: 20px;
+        height: 20px;
+        font-size: 16px;
+      }
+    }
+
+    .v-text-field.v-text-field--solo.v-input--dense > .v-input__control {
+      min-height: unset;
+    }
+
+    .v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)
+      > .v-input__control
+      > .v-input__slot,
+    .v-text-field.v-text-field--enclosed .v-text-field__details {
+      padding: 0 8px;
+    }
+
+    .v-input.outlined {
+      outline-style: none;
+      font-size: 12px;
+      box-shadow: 0 0 0 1px var(--v-base-lighten2);
+
+      &:focus,
+      &.v-input--is-focused {
+        box-shadow: 0 0 0 1px var(--v-primary-base);
+      }
+    }
+
+    .v-text-field.v-input--dense:not(
+        .v-text-field--outlined
+      ).v-text-field__prefix,
+    .v-text-field.v-input--dense:not(
+        .v-text-field--outlined
+      ).v-text-field__suffix,
+    .v-text-field.v-input--dense:not(.v-text-field--outlined) input {
+      padding: 0;
+    }
+
+    .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)
+      > .v-input__control
+      > .v-input__slot {
+      box-shadow: none;
+      border-radius: 0;
+    }
+  }
+</style>
+
+<script>
+  import { VIcon, VTextField } from 'vuetify/lib';
+
+  /**
+   * @description stylized searchbar used in VcsTreeview, VcsDataTable and VcsList
+   * @vue-prop {string} [placeholder='search.title'] - Placeholder will be displayed in the search field, and will be translated.
+   * @vue-prop {string[]} [customClasses] - CSS classes to customize style
+   * @vue-prop {string} [value] - The search value
+   * @vue-prop {boolean} [hasFilter=false] - Appends a filter icon
+   * @vue-data {slot} [prepend] - prepend slot overwriting search icon
+   * @vue-data {slot} [default] - default slot overwriting search input text field. binds all props
+   * @vue-data {slot} [append] - append slot overwriting filter icon. binds hasFilter prop
+   */
+  export default {
+    name: 'VcsTreeviewSearchbar',
+    components: {
+      VIcon,
+      VTextField,
+    },
+    props: {
+      placeholder: {
+        type: String,
+        default: 'search.title',
+      },
+      customClasses: {
+        type: Array,
+        default: () => [],
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+      hasFilter: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+</script>

package/src/components/notification/VcsBadge.vue

@@ -0,0 +1,29 @@
+<template>
+  <span class="badge rounded-circle h-3 w-3" :class="[color]" />
+</template>
+
+<style lang="scss" scoped>
+  @import '../../styles/shades.scss';
+  .v-application .theme--light .badge {
+    border: 1px solid map-get($shades, 'white') !important;
+  }
+  .v-application .theme--dark .badge {
+    border: 1px solid map-get($shades, 'black') !important;
+  }
+</style>
+
+<script>
+  /**
+   * @description UI component representing a circular indicator.
+   * @vue-prop {string} color - any of the theme colors.
+   */
+  export default {
+    name: 'VcsBadge',
+    props: {
+      color: {
+        type: String,
+        default: 'warning',
+      },
+    },
+  };
+</script>

package/src/components/notification/VcsHelp.vue

@@ -0,0 +1,39 @@
+<template>
+  <v-alert
+    :value="show"
+    dense
+    text
+    class="mb-0 font-weight-regular rounded-0 px-2 pt-2"
+  >
+    <slot>
+      <span>{{ $t(text) }}</span>
+    </slot>
+  </v-alert>
+</template>
+
+<script>
+  import { VAlert } from 'vuetify/lib';
+
+  /**
+   * @description Wraps Vuetify VAlert for displaying help.
+   * @vue-data {slot} [#default] - Slot to specify html based help. Gets precedence over text prop.
+   * @vue-prop {boolean} show - If help should be displayed. If false, component is completely hidden.
+   * @vue-prop {string} [text] - Optional help text. Must be plain string. Use 'help' slot for html based help texts. Help slot has precedence over text prop.
+   */
+  export default {
+    name: 'VcsHelp',
+    components: {
+      VAlert,
+    },
+    props: {
+      text: {
+        type: String,
+        default: undefined,
+      },
+      show: {
+        type: Boolean,
+        required: true,
+      },
+    },
+  };
+</script>

package/src/components/notification/VcsTooltip.vue

@@ -0,0 +1,160 @@
+<template>
+  <v-tooltip
+    :disabled="!tooltip"
+    :content-class="`tooltip ${arrowClass}`"
+    :bottom="tooltipPosition === 'bottom'"
+    :top="tooltipPosition === 'top'"
+    :left="tooltipPosition === 'left'"
+    :right="tooltipPosition === 'right'"
+    transition="expand-x-transition"
+    v-bind="{ ...$props, ...$attrs }"
+  >
+    <template #activator="{ on, attrs }">
+      <slot name="activator" :on="on" :attrs="attrs" />
+    </template>
+    <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;
+  // }
+  //}
+  //}
+</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
+   */
+  const TooltipPositions = {
+    bottom: 'arrow-top',
+    top: 'arrow-bottom',
+    left: 'arrow-right',
+    right: 'arrow-left',
+  };
+
+  /**
+   * @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. 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,
+        default: undefined,
+      },
+      tooltipPosition: {
+        type: String,
+        default: 'bottom',
+        validator(value) {
+          return Object.keys(TooltipPositions).includes(value);
+        },
+      },
+    },
+    computed: {
+      arrowClass() {
+        return TooltipPositions[this.tooltipPosition];
+      },
+    },
+  };
+</script>

package/src/components/notification/validation.js

@@ -0,0 +1,19 @@
+/**
+ * validates rules and returns error messages
+ * @param {Array} rules - validation functions or string messages
+ * @param {*} value
+ * @returns {string[]}
+ */
+export default function validate(rules, value) {
+  if (Array.isArray(rules)) {
+    return rules
+      .map((rule) => {
+        if (typeof rule === 'function') {
+          return rule(value);
+        }
+        return rule;
+      })
+      .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>