@vcmap/ui 5.0.0-rc.6 → 5.0.0-rc.9

package/src/components/lists/VcsTreeviewSearchbar.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="pa-2 accent position-relative d-flex flex-row justify-space-between align-center">
+    <slot name="prepend">
+      <v-icon
+        class="search-icon my-0 ml-1"
+        v-text="'$vcsSearch'"
+        slot="prepend"
+        size="12"
+      />
+    </slot>
+
+    <slot>
+      <v-text-field
+        solo
+        dense
+        hide-details
+        class="searchbar outlined rounded-xl align-center d-flex justify-center white pa-1 pl-6"
+        :placeholder="(placeholder || 'search.title') | translate"
+        :value="value"
+        @input="$event => handleInput($event)"
+        clearable
+      />
+    </slot>
+
+    <slot name="append">
+      <v-icon v-if="hasFilter" v-text="'$vcsFilter'" class="ml-2" size="16" />
+    </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 #dedede;
+
+    &: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-right: 0;
+    }
+
+    .v-input.outlined {
+      outline-style: none;
+      font-size: 12px;
+      box-shadow: 0 0 0 1px #dedede;
+
+      &: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 { onMounted, onUnmounted } from '@vue/composition-api';
+
+  import { Subject } from 'rxjs';
+  import { debounceTime } from 'rxjs/operators';
+
+
+  /**
+   * @description Stylized wrapper around vuetify divider
+   * @vue-prop {number}   height - Height of the component.
+   */
+  export default {
+    name: 'VcsTreeviewSearchbar',
+    props: {
+      placeholder: {
+        type: String,
+        default: '',
+      },
+      customClasses: {
+        type: Array,
+        default: () => ([]),
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+      hasFilter: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props, context) {
+      const sub = new Subject();
+      onMounted(() => {
+        sub.pipe(debounceTime(330)).subscribe(
+          (value) => {
+            context.emit('input', value);
+          },
+        );
+      });
+      onUnmounted(() => sub.unsubscribe());
+
+      return {
+        sub,
+        handleInput: (val) => {
+          sub.next(val);
+        },
+      };
+    },
+  };
+</script>

package/src/components/notification/VcsBadge.vue

@@ -0,0 +1,27 @@
+<template>
+  <span class="badge rounded-circle h-3 w-3" :class="[color]" />
+</template>
+
+<style lang="scss" scoped>
+  .v-application .badge {
+    border: 1px solid var(--v-basic-base) !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/VcsTooltip.vue

@@ -0,0 +1,154 @@
+<template>
+  <v-tooltip
+    :disabled="!tooltip"
+    :content-class="`tooltip ${arrowClass}`"
+    :bottom="tooltipPosition === 'bottom'"
+    :top="tooltipPosition === 'top'"
+    :left="tooltipPosition === 'left'"
+    :right="tooltipPosition === 'right'"
+    :open-delay="$attrs.openDelay || 200"
+    v-bind="{...$props, ...$attrs}"
+  >
+    <template #activator="{ on, attrs }">
+      <slot name="activator" :on="on" :attrs="attrs" />
+    </template>
+    <span>{{ 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>
+
+/**
+ * @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.
+   * @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',
+    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/contentTree/LayerTree.vue

@@ -12,7 +12,7 @@
 
 <script>
   import { inject } from '@vue/composition-api';
-  import { VcsTreeview } from '@vcsuite/ui-components';
+  import VcsTreeview from '../components/lists/VcsTreeview.vue';
 
   /**
    * @description

package/src/contentTree/contentTreeCollection.js

@@ -8,7 +8,7 @@ import SubContentTreeItem, { subTreeSymbol } from './subContentTreeItem.js';
 import LayerTree from './LayerTree.vue';
 import { WindowSlot } from '../manager/window/windowManager.js';
 import { createToggleAction } from '../actions/actionHelper.js';
-import { ButtonLocation } from '../manager/buttonManager.js';
+import { ButtonLocation } from '../manager/navbarManager.js';
 
 /**
  * @type {symbol}
@@ -127,7 +127,11 @@ class ContentTreeCollection extends IndexedCollection {
       vcsAppSymbol,
     );
 
-    this._app.navbarManager.add({ id, action, location: ButtonLocation.CONTENT }, vcsAppSymbol);
+    this._app.navbarManager.add(
+      { id, action },
+      vcsAppSymbol,
+      ButtonLocation.CONTENT,
+    );
     this._subTreeViewItems.value.set(id, subTreeViewItem);
     return () => {
       app.windowManager.remove(id);